<template>
    <div class="personal-center">
        <el-card>
            <div class="header">
                <el-avatar :size="60" src="user.avata" @error="errorHandler">
                    <img :src="defaultAvatar" />
                </el-avatar>

                <div class="info">
                    <h2>{{ user.userName || '未设置昵称' }}</h2>
                    <p>{{ user.realName || '' }}</p>
                </div>
                <el-button type="primary" @click="editProfile">编辑信息</el-button>
            </div>
            <el-descriptions title="个人信息" column="3" border size="large">
                <el-descriptions-item>
                    <template #label>
                        <div class="cell-item">
                            <el-icon>
                                <User />
                            </el-icon>
                            登录名
                        </div>
                    </template>
                    {{ user.loginName }}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template #label>
                        <div class="cell-item">
                            <el-icon>
                                <Message />
                            </el-icon>
                            邮箱
                        </div>
                    </template>
                    {{ user.email || '未绑定邮箱' }}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template #label>
                        <div class="cell-item">
                            <el-icon>
                                <UserFilled />
                            </el-icon>
                            真实姓名
                        </div>
                    </template>
                    {{ user.realName }}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template #label>
                        <div class="cell-item">
                            <el-icon>
                                <Iphone />
                            </el-icon>
                            手机号
                        </div>
                    </template>
                    {{ user.phoneNumber }}
                </el-descriptions-item>

                <el-descriptions-item>
                    <template #label>
                        <div class="cell-item">
                            <el-icon>
                                <Iphone />
                            </el-icon>
                            QQ号
                        </div>
                    </template>
                    {{ user.qqNumber }}
                </el-descriptions-item>


                <el-descriptions-item>
                    <template #label>
                        <div class="cell-item">
                            <el-icon>
                                <Notebook />
                            </el-icon>
                            个性签名
                        </div>
                    </template>
                    {{ user.remark }}
                </el-descriptions-item>

            </el-descriptions>
        </el-card>

        <!-- 编辑对话框 -->
        <el-dialog title="编辑个人信息" v-model="dialogVisible">
            <el-form :model="form" :rules="rules" ref="formRef" label-width="100px">
                <el-form-item label="昵称" prop="userName">
                    <el-input v-model="form.userName"></el-input>
                </el-form-item>
                <el-form-item label="真实姓名" prop="realName">
                    <el-input v-model="form.realName"></el-input>
                </el-form-item>
                <el-form-item label="邮箱" prop="email">
                    <el-input v-model="form.email"></el-input>
                </el-form-item>
                <el-form-item label="手机号" prop="phoneNumber">
                    <el-input v-model="form.phoneNumber"></el-input>
                </el-form-item>
                <el-form-item label="个性签名" prop="remark">
                    <el-input v-model="form.remark" type="textarea"></el-input>
                </el-form-item>
            </el-form>
            <div class="dialog-footer">
                <el-button @click="dialogVisible = false">取消</el-button>
                <el-button type="primary" @click="saveProfile">保存</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script setup>
import { ref, reactive, inject, onMounted } from 'vue';
import { User, Message, UserFilled, Iphone, Notebook } from '@element-plus/icons-vue';
import { useUserInfoStore } from '../../store/userInfoStore';
const userInfoStore = useUserInfoStore();

const user = reactive({});

const defaultAvatar = "https://media1.giphy.com/media/v1.Y2lkPTc5MGI3NjExeDdhbGtlamtzNXpvajhvY2tiNm5lZGp3MDJudHdlNXVjcjR1ZXd3byZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/lMsT2f47tDxFMYdJMC/giphy.webp";
const errorHandler = () => true

const dialogVisible = ref(false);
const form = reactive({ ...user });
const rules = {
    // userName: [{ required: true, message: '昵称不能为空', trigger: 'blur' }],
    // email: [{ type: 'email', message: '请输入有效的邮箱地址', trigger: 'blur' }],
};

const formRef = ref(null);

const editProfile = () => {
    Object.assign(form, user); // 将用户信息拷贝到表单
    dialogVisible.value = true;
};

const saveProfile = async () => {

    formRef.value.validate(async (valid) => {
        if (valid) {
            try {
                // 调用后端接口保存更新
                const isUpdated = await userInfoStore.UpdateUserInfo(form);
                if (isUpdated) {
                    // 同步 form 到 user
                    Object.assign(user, form);
                }
            } catch (error) {
                console.log(error);
                ElMessage.error('请求失败了，请稍后重试');
            } finally {
                dialogVisible.value = false;
            }
        }
    });
};

onMounted(() => {
    Object.assign(user, userInfoStore.userInfo);
})
</script>

<style scoped>
.personal-center {
    padding: 20px;
}

.header {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}

.header .info {
    flex: 1;
    margin-left: 20px;
}

.dialog-footer {
    text-align: right;
}
</style>